<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="编辑表单信息"
        width="860px"
    >
        <div class="edit_page_div">
            <el-form ref="form" :model="form" :rules="rules" :show-message="false" label-width="100px">
                <el-form-item label="流程类型" prop="flowableCode">
                    <select-option v-model="form.flowableCode" :list="fiowTypeList"
                                   select-width="700px"></select-option>
                </el-form-item>
                <el-form-item label="表单名称" prop="formName">
                    <el-input v-model="form.formName" style="width: 700px;"></el-input>
                </el-form-item>
            </el-form>
            <page-list :loading="loading" :table-config="tableConfig" :data-list="form.dataList" :height="height" show-index
                       show-operate>
                <template #searchArea>
                    <el-button type="primary" @click="showDetail=true">新增</el-button>
                </template>

                <template #operateContent="scope">
                    <el-popconfirm title="是否确定删除当前数据？" @confirm="delData(scope.row)">
                        <el-button slot="reference" type="text">删除</el-button>
                    </el-popconfirm>
                </template>
            </page-list>
            <div class="edit_button">
                <el-button v-loading.fullscreen.lock="loading" type="primary" @click="submit">保 存</el-button>
                <el-button type="primary" @click="resetForm">取 消</el-button>
            </div>
            <form-detail-edit :visible.sync="showDetail" @change="addData"></form-detail-edit>
        </div>
    </el-dialog>
</template>

<script>
import SelectOption from "@/components/select/selectOption.vue";
import PageList from "@/components/grid/pageList.vue";
import FormDetailEdit from "./formDetailEdit.vue";

export default {
    name: "formEdit",
    components: {FormDetailEdit, PageList, SelectOption},
    props: {
        visible: Boolean,
        id: String,
    },
    data() {
        return {
            height: '300px',
            loading: false,
            showDetail: false,
            form: {
                flowableCode: '',
                formName: '',
                dataList: [],
            },
            rules: {
                flowableCode: [{required: true, message: '', trigger: 'change'}],
                formName: [{required: true, message: '', trigger: 'change'}],
            },

            fiowTypeList: [],

            detailId: '',
            tableConfig: [
                {label: "显示标签", prop: "showName", width: 220},
                {label: "控件名称", prop: "empName", minWidth: 300},
            ],
            index: 1,
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.getFlowTypeList();
            }
        }
    },
    methods: {
        getFlowTypeList() {
            this.loading = true;
            this.$axios.post('/CHILD_CONFIG/baseFlowType/getAllList').then(res => {
                this.fiowTypeList = this.$common.getSelectList(res.data, "flowableName", "flowableCode");
                if (this.id) {
                    this.getData();
                }
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },
        getData() {
            this.loading = true;
            this.$axios.get('/CHILD_WORKFLOW/flowForm/getOneEntity/' + this.id).then(res => {
                this.form = res.data;
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },
        addData(row) {
            this.form.dataList.push({
                indexId: this.index,
                showName: row.showName,
                empName: row.empName
            });
            this.index = this.index + 1;
        },
        delData(row) {
            this.form.dataList = this.form.dataList.filter(item => item.id != row.id || item.indexId != row.indexId);
        },
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$axios.post("/CHILD_WORKFLOW/flowForm/" + (this.id ? "update" : "insert"), this.form).then(res => {
                        this.resetForm();
                        this.$message.success(res.message);
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false;
                    })
                } else {
                    this.$message.error('表单填写有误');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.form = this.$options.data().form;
            this.$emit('update:visible', false);
            this.$emit('refreshList');
        },
    }
}
</script>

<style scoped>

</style>